import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { SongsWrapper } from './style'
import { useEffect } from 'react'
import { useAppDispatch } from '@/store'
import { fetchCategoryAction, fetchChangeCategoryAction } from './store/songs'

import SongsHeader from './c-pages/songs-header'
import SongsList from './c-pages/songs-list'

interface IProps {
  children?: ReactNode,
}

const Songs: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchCategoryAction())
    dispatch<any>(fetchChangeCategoryAction('全部'))
  }, [])
  return (
    <SongsWrapper className="wrap-v2">
      <SongsHeader></SongsHeader>
      <SongsList></SongsList>
    </SongsWrapper>
  )
}

export default memo(Songs)
